<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="提现编码"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="微信昵称"></el-input>
            </el-form-item>
            <el-form-item prop="b">
                <el-date-picker v-model="searchForm.b" type="date" placeholder="申请日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item prop="a">
                <el-date-picker v-model="searchForm.a" type="date" placeholder="审核日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.level" size="small">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in memberList">{{item.name}}</el-radio-button>
            </el-radio-group>
             <el-button type="primary" @click="handleAdd()" size="small" style="margin-left:15px" icon="el-icon-plus" v-has="'user:userWithdrawDeposit:add user'">添加用户</el-button>
            <!-- <el-button type="primary" @click="handleAdd()" size="small" icon="el-icon-top">导入推荐加盟关系</el-button> -->
             <el-button
               type="warning"
               icon="el-icon-download"
               size="small"
               :loading="exportLoading"
               @click="handleExport"
               v-has="'user:userWithdrawDeposit:input'"
             >导出</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"
            @selection-change="handleSelectionChange"  stripe>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="name" label="编号" v-if="!hideTableColumn.includes('number')"></el-table-column>
            <el-table-column prop="name" label="用户头像" v-if="!hideTableColumn.includes('img')">
              <template #default="scope">
                 <el-image :src="scope.row.img" fit="fill" v-image-preview="scope.row.img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="提现编码" v-if="!hideTableColumn.includes('withdrawNumber')"></el-table-column>
            <el-table-column prop="name" label="用户名" v-if="!hideTableColumn.includes('userName')"></el-table-column>
            <el-table-column prop="name" label="微信昵称" v-if="!hideTableColumn.includes('wxNick')"></el-table-column>
            <el-table-column prop="name" label="微信ID" v-if="!hideTableColumn.includes('wxId')"></el-table-column>
            <el-table-column prop="name" label="手机号" v-if="!hideTableColumn.includes('phone')"></el-table-column>
            <el-table-column prop="name" label="加盟会员等级" v-if="!hideTableColumn.includes('level')"></el-table-column>
            <el-table-column prop="name" label="提现总金额(元)" v-if="!hideTableColumn.includes('withdrawMoney')"></el-table-column>
            <el-table-column prop="name" label="已提现(元)" v-if="!hideTableColumn.includes('withdrawYesMoney')"></el-table-column>
            <el-table-column prop="name" label="可提现(元)" v-if="!hideTableColumn.includes('withdrawIsYesMoney')"></el-table-column>

            <el-table-column prop="name" label="操作" fixed="right">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-data"
                    @click="handleWithdrawalRecord(scope.row)"
                    v-has="'user:userWithdrawDeposit:cash'"
                  >提现记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange"
            :page-size="limit" :page-sizes="[20, 50, 100, 200]" :current-page="page"
            layout="total,sizes,prev, pager, next, jumper" :total="totalCount">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- /*提现记录*/	 -->
    <el-dialog  width="900px" v-dialogDrag destroy-on-close :visible.sync="userVisible" @close="userVisible = false">
      <template v-slot:title>
          <p style="font-size: 16px;margin-bottom: 0px;">手机号为<span class="red">{{statusRow.phone}}</span>用户的提现记录</p>
      </template>
      <el-table :data="withdrawList" style="width: 100%" border :max-height="500" v-infinite-scroll="dialogTableListScroll" stripe>
        <el-table-column prop="name" label="提现编号" ></el-table-column>
        <el-table-column prop="name" label="提现金额(元)" ></el-table-column>
        <el-table-column prop="name" label="提现状态" ></el-table-column>
        <el-table-column prop="name" label="更新时间" ></el-table-column>
        <p slot="append" style="text-align:center; line-height:48px;" v-if="dialogTableLoading">正在加载...</p>
        <p slot="append" style="text-align:center; line-height:48px;" v-if="dialogTableIsMore">没有更多了</p>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userVisible = false" size="small" >关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getCallRecord
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        sta:true,
        loading: false,
        userLoading: false,
        userVisible:false,
        exportLoading:false,
        searchForm: {
          a:'',
          b:[]
        },
        memberList:[{name:'普通会员',id:'1'},{name:'黄金会员',id:'2'},{name:'白金会员',id:'3'}],
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'用户头像',
            value:'img'
        },{
            name:'提现编码',
            value:'withdrawNumber'
        },{
            name:'用户名',
            value:'userName'
        },{
            name:'微信昵称',
            value:'wxNick'
        },{
            name:'微信ID',
            value:'wxId'
        },{
            name:'手机号',
            value:'phone'
        },{
            name:'加盟会员等级',
            value:'level'
        },{
            name:'提现总金额(元)',
            value:'withdrawMoney'
        },{
            name:'已提现(元)',
            value:'withdrawYesMoney'
        },{
            name:'可提现(元)',
            value:'withdrawIsYesMoney'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        statusList: [{
          id: '1',
          name: '已实名'
        }, {
          id: '2',
          name: '未实名'
        }],
        dataList:[{name:'22',id:'1',status:false},{name:'22',id:'2',status:true}],
        totalCount: 0,
        page: 1,
        limit: 20,
        multipleSelection: '',
        dialogTitle: '',

        withdrawList:[],
        dialogTablePage:1,
        dialogTablePageTotal:5,//最多能滚动page
        dialogTableLoading:false,//弹框表格 正在加载
        dialogTableIsMore:false,//弹框表格 没有更多
        dialogStatus:'',        //弹框各个点击状态

      }
    },

    mounted() {
      //this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let dataPage = {
            'paging.sort': JSON.stringify({
              "property": "createTime",
              "direction": "DESC"
            }),
            'paging.page': this.page,
            'paging.limit': this.limit,
            'paging.start': (this.page == '1' ? '1' : ((this.page - 1) * (this.limit) + 1)),
          }
          let data = Object.assign(dataPage, this.searchForm);
          this.loading = true;
          this.totalCount = 0;
          const result = await getCallRecord(data);
          if (result.success == true) {
            this.totalCount = result.total;
            this.dataList = result.data;
          } else {
            this.$message.error(result.message);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      handleDelt(id){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            lifeTestPaperupdateStatus({id:id}).then((result) => {
                  if (result.code == '200') {
                       this.dataInfo();
                       this.$message({
                           message: result.message,
                           type: 'success'
                         });
                   }else{
                      this.$message.error(result.message);
                   }
               });
          }).catch(() => {
              console.log(1);
          });
      },
      /*提现记录*/
      handleWithdrawalRecord(row){
        this.userVisible = true;
        this.statusRow = row;
      },
      async getDialogTableList(){/*获取弹框列表*/
        try {
           this.dialogTableLoading = true;
           let data = {id:this.statusRow.id,page:this.dialogTablePage,pageSize:'20'};
           let result = await getCallRecord()

           if (result.success == true) {
              this.withdrawList = this.withdrawList.concat(result.data);
              this.dialogTablePageTotal = '';//后台返回总共有多少分页
              if(result.data.length<20 && (this.dialogTablePage!='1')){
                  this.dialogTableIsMore = true;
              }
           } else {
             this.$message.error(result.message);
           }
           this.dialogTableLoading = false;
        } catch (err) {
          console.log(err)
        }
      },
      dialogTableListScroll(){/*弹框列表滚动*/
        if(this.dialogTablePage < this.dialogTablePageTotal){
            this.dialogTablePage++;
            this.getDialogTableList();
        }
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.userLoading) return;
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },

      handleDelt(row) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getCallRecord({
            id: row.id
          }).then((result) => {
            if (result.success == true) {
              this.dataInfo();
              this.$message.success(result.message);
            } else {
              this.$message.error(result.message);
            }
          });
        }).catch(() => {
          //console.log('');
        });
      },
      handleAdd(){
         this.$router.push({path:'/user/addUser'});
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(page) {
        this.page = page;
        this.dataInfo()
      },
      handleSizeChange(val) {
        this.limit = val;
        this.dataInfo();
      },

    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
